<!DOCTYPE html>
<html lang="ko">
	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
		<title>jscript08이벤트처리</title>
	</head>
	<body>
		<h1>이벤트처리</h1>
		<h3>이벤트 발생시 특정코드를 실행할 수 있음</h3>
		<p>이벤트 종류</p>
		<p>onclick : 객체를 클릭했을 때</p>
		<p>onload : 브라우저를 통해 문서가 읽혀진 후</p>
		<p>onsubmit : submit 버튼을 클릭했을 때</p>
		<p>onfocus : 객체에 포커스를 받을 때</p>
		<p>onblur : 객체가 포커스를 잃을 때</p>
		<p>onkeyup : 키를 누른 후 손을 놓을 때</p>
		
		<h3>이벤트 추가</h3>
		<p>인라인 이벤트로 추가(비추) : html 태그에 on~ 속성을 이용</p>
		<p>객체의 이벤트 속성으로 추가(추천!) : 객체.on~ = function() {  };</p>
		<p>이벤트 리스너를 이용(웹 표준, 적극추천!) : 객체.addEventListener("이벤트", 함수, 버블링여부);</p>
		<hr />
		<h1></h1>
		<h1></h1>
		<button id="btn1">객체의 이벤트 속성으로 처리</button>
		<button id="btn2">이벤트 리스너로 처리</button>
		<div>
			<input type="text" name="uid" />
			<button id="btn3">입력완료</button>
			<span id="txtlength"></span>
		</div>
		<div id="box" style="width: 250px; height: 100px; background: red;
		color: white; font-weight: bold; font-size: 1.5em; text-align: center; padding-top: 85px;">
		마우스를 올려보세요!</div>
		
		<script type="text/javascript">
			var btn1 = document.getElementById("btn1");
			btn1.onclick = function() { say1(); };
			var btn2 = document.getElementById("btn2");
			btn2.addEventListener( "click", say2, true );
			// btn2.attachEvent("onclick", say2);	// IE8 이하
			
			var btn3 = document.getElementById("btn3");
			btn3.addEventListener( "click", sayuid, true );
			
			var box = document.getElementById("box");
			box.addEventListener("mouseover", box1, true);
			box.addEventListener("mouseout", box2, true);
			
			var input = document.getElementsByTagName("input");
			input[0].addEventListener("keyup", say3, true);
			
			function say1() { 
				var h1s = document.getElementsByTagName("h1");
				h1s[1].innerHTML += "객체 속성 이벤트";	
			}
			function say2() {
				 var h1s = document.getElementsByTagName("h1");
				h1s[2].innerHTML += "이벤트 리스너";
			}
			function sayuid() {
				var uid = document.getElementsByName("uid");
				if ( uid[0].value == "" ) {
					alert("아이디를 입력하세요!");
					uid[0].focus();
				}
			}
			function box1() {
				box.innerHTML = "이글이 보이나요?";
			}
			function box2() {
				box.innerHTML = "마우스를 올려보세요!";
			}
			function say3() {
				var txt = document.getElementById("txtlength");
				txt.innerHTML = input[0].value.length;
			}			
			
			// 문서가 다 블러지면 브라우저가 문서를 다 읽었을 때
			window.onload = function() { alert("문서 모두 읽음"); };
		</script>
	</body>
</html>
